.process-form{
    width: 100%;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    flex-wrap: wrap;
    justify-content: center;
    button{
        background: #fff;
    }
    &>div{
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }
    .grouping{
        position: relative;
        background: #fff;
        //&:before{
        //    content: '';
        //    display: block;
        //    height: 21px;
        //    width: 1px;
        //    background: #666;
        //    position: absolute;
        //    left: 50%;
        //    margin-left: -1px;
        //    top: -1px;
        //}

        &>div:hover{
            .node-control{
                display: flex;
                flex-direction: row;
                justify-content: center;
                align-items: center;
            }
        }
    }

    .node-control{
        position: absolute;
        left: 0;
        bottom: 0;
        width: 100%;
        height: 24px;
        display: none;
        a{
            flex: 1;
            display: block;
            height: 24px;
            font-size: 14px;
            line-height: 24px;
            background: rgba(204,0,0,.8);
            color: #fff;
            &:last-of-type{
                border-left: 1px solid #fff;
            }
        }
    }

    .haveChild{
        //&:after{
        //    content: '';
        //    display: block;
        //    width: 1px;
        //    height: 20px;
        //    background: #666;
        //    left: 50%;
        //    margin-left: -1px;
        //    position: absolute;
        //    bottom: 0px;
        //}
    }

    .process-group{
        display: flex;
        flex-direction: row;
        margin-top: 20px;
        position: relative;
        //&:before{
        //    content: '';
        //    display: block;
        //    background: #666;
        //    width: calc(~"100% - 179px");
        //    height: 1px;
        //    top: -21px;
        //    left: 89px;
        //    position: absolute;
        //}
        &>div{
            position: relative;
            width: 180px;
            //&:before{
            //    content: '';
            //    display: block;
            //    height: 20px;
            //    width: 1px;
            //    background: #666;
            //    position: absolute;
            //    left: 50%;
            //    margin-left: -1px;
            //    top: -20px;
            //}
            &>div{
                display: flex;
                flex-direction: column;
                align-items: center;
            }
        }
    }
    .group-container{
        margin: 20px 15px 21px 15px;
        border: 1px solid #666;
        padding: 10px;
        position: relative;
        //&:before{
        //    content: '';
        //    display: block;
        //    height: 20px;
        //    width: 1px;
        //    background: #666;
        //    position: absolute;
        //    left: 50%;
        //    margin-left: -1px;
        //    top: -21px;
        //}
        //&:after{
        //    content: '';
        //    display: block;
        //    height: 22px;
        //    width: 1px;
        //    background: #666;
        //    position: absolute;
        //    left: 50%;
        //    margin-left: -1px;
        //    bottom: -22px;
        //}
    }
    .group-node{
        position: relative;
        margin-top: 40px;
        height: 50px;
        &:before{
            content: '';
            display: block;
            width: 1px;
            height: 40px;
            background: #666;
            position: absolute;
            top: -40px;
            left: 50%;
            margin-left: -1px;
        }
        &:hover{
            .node-control{
                display: flex;
                flex-direction: row;
                justify-content: center;
                align-items: center;
                text-align: center;
            }
        }
        &.noLine{
            margin-top: 20px;
        }
        &.noLine:before{
            display: none;
        }
        a.add-node{
            display: block;
            width: 12px;
            height: 12px;
            background: #cc0000;
            border-radius: 50%;
            position: absolute;
            left: 50%;
            bottom: -7px;
            text-align: center;
            color: #fff;
            font-size: 12px;
            z-index: 9;
            line-height: 11px;
            margin-left: -5px;
        }
    }
    .toe button{
        width:100px;text-align: center;height:50px;line-height: 48px;border: 1px solid #000;float: left;outline: none;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;
    }
    .toe button:hover{
        white-space: unset;
        overflow-y: auto;
    }
}
